<template>
  <div class="container">
    <swiper class="swiper" :options="swiperOption" ref="swiperWrap">
      <swiper-slide v-for="(item, index) in focusList" :key="index" class="bv">
        <div class="bw1">
          <img :src="item.img" alt="" />
        </div>
      </swiper-slide>

      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

export default {
  name: "swiper-example-navigation",

  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      square: 0,

      swiperOption: {
        speed: 500,
        
        slidesPerView: 1.3,
        spaceBetween: 0,

        centeredSlides: true,
        loop: true,
        autoplay: {
          delay: 1000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 事件
        on: {
          slideChangeTransitionEnd: () => {},
        },
      },
    };
  },
  props: {
    focusList: {
      type: Array,
    },
  },
  created() {},
  computed: {
    swiper() {
      return this.$refs.swiperWrap.swiper;
    },
  },

  methods: {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.tab {
  display: flex;
  div {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    transition: all 0.3s ease;
  }
  div.active {
    color: #f50;
    font-size: 16px;
    font-weight: 500;
  }
}

.bw1 {
  width: 100%;
  height: 116px;
  background-color: pink;
  border-radius: 6px;
  overflow: hidden;
  > img {
    width: 100%;
    height: 100%;
  }
}
.bw2 {
  width: 100%;
  background-color: yellow;
}
.bw3 {
  width: 100%;
  background-color: red;
}
.bw4 {
  width: 100%;
  background-color: green;
}
.container {
  margin-top: 10px;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
// .swiper-slide.swiper-slide-duplicate{
//   margin-right:0 !important;
// }
// .swiper-slide.swiper-slide-prev{
//   margin-right:0 !important;
// }
// .swiper-slide.swiper-slide-prev{
//   margin-right:0 !important;
// }

.swiper-slide {
  font-size: 18px;
  background: #fff;
  // margin-right:0px !important;
  height: 116px;
  /* Center slide text vertically */

  transition: 300ms;
  transform: scale(0.8);

  > .box {
    background-color: pink;
  }
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}
</style>